<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .w {
            width: 1200px;
            margin: auto;
        }

        .container {

            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .card {
            flex-basis: 200px;
            flex-grow: 1;
            min-height: 200px;
        }

        .card img {
            width: 100%;
            display: block;
        }

        .card div {
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            line-height: 2;
            padding-left: 10px;
        }

        .pager button {
            border: 0;
            background-color: #eee;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin: 0 4px;
            cursor: pointer;
        }

        /* 页码高亮选择器 */
        .pager button.active {
            background-color: red;
            color: #fff;
        }
    </style>
</head>

<body>
    <h3>
        需求：

        <p>1-实现分页功能， 点击不同分页按钮，显示对应页面数据</p>

        <p>2-高亮显示被点击分页按钮</p>
    </h3>
    <hr>
    <div class="container w">

    </div>
    <div class="pager w">

    </div>
    <script src="./data.js"></script>
    <script>
        var container = document.querySelector('.container')
        var pager = document.querySelector('.pager')
        // 页码
        var page = 1
        // 每页显示数据条数
        var size = 10
        // 数据总条数
        var total = picList.length
        // 最大页码
        var maxPage = Math.ceil(total / size)
        // 动态创建分页按钮
        for (var i = 1; i <= maxPage; i++) {
            var button = document.createElement('button')
            button.innerHTML = i
            if (i == 1) {
                button.classList.add('active')
            }
            // 分页按钮注册点击事件: 异步执行
            button.onclick = function () {
                // 1-更新页码 
                page = this.innerText
                // 2-更新页面数据
                render()
                // 3-高亮显示被点击的分页按钮
                pager.querySelector('.active').classList.remove('active')
                this.classList.add('active')
            }
            pager.appendChild(button)
        }

        // 渲染数据
        const render = () => {
            // 清空之前的数据
            container.innerHTML = ''
            // page=1   [0,9]   (page-1)*size=0*10=0        page*size=1*10=10
            // page=2   [10,19] (page-1)*size=1*10=10       page*size=2*10=20
            // page=3   [20,29] (page-1)*size=2*10=20       page*size=3*10=30
            var start = (page - 1) * size
            var end = page * size
            picList.slice(start, end).forEach(function (item) {
                // 创建一个div
                var card = document.createElement('div')
                card.className = 'card'
                // 创建一个img标签
                var img = document.createElement('img')
                // 设置图片地址
                img.src = item.url
                // 创建一个div, 保存图片标题
                var title = document.createElement('div')
                title.innerText = item.author
                // 将img和title追加到card内部
                card.appendChild(img)
                card.appendChild(title)
                // 将card追加到container内部
                container.appendChild(card)
            })

        }
        // 初次渲染数据
        render()
    </script>
</body>

</html>